<template>
	<el-container>
	  <el-header class="header3">
		  <el-form :inline="true" :model="searchdata" class="demo-form-inline">
		    <el-form-item>
		      <el-input v-model="searchdata" placeholder="搜索" clearable="true"><el-button slot="append" @click="searchuser" icon="el-icon-search"></el-button></el-input>
		    </el-form-item>
		  </el-form>
		  <el-dialog
		    title="查找"
		    :visible.sync="istrue3"
		    width="75%"
		    :before-close="handleClose">
		    <el-table
		      :data="searchdata2"
		      border
		      style="width: 100%;"
		    >
		    <el-table-column
		    	type="index"
		    	label="#"
		    	width="25">
		    </el-table-column>
		      <el-table-column
		        prop="username"
		        label="用户名"
		        width="100">
		    </el-table-column>
		    <el-table-column
		        prop="realname"
		        label="真实姓名"
		        width="100">
		      </el-table-column>
		      <el-table-column
		        prop="userid"
		        label="身份证号"
		    	width="200">
		      </el-table-column>
		      <el-table-column
		    	prop="phonenum"
		    	label="联系电话"
		    	width="200">
		    </el-table-column>
		    <el-table-column
		    	prop="address"
		    	label="居住地址"
		    	width="300">
		    </el-table-column>
		    <el-table-column
		    	prop="authorityname"
		    	label="权限"
		    	width="100">
		    </el-table-column>
		    <el-table-column
		    	label="操作"
		    	>
		    	<template slot-scope="scope">
		    		<el-button type="primary" @click="update(scope.$index, scope.row)">修改</el-button>
					
		    	</template>
		    		 					
		    </el-table-column>
		    </el-table>
		  				<span slot="footer" class="dialog-footer">
		  					<el-button type="primary" @click="istrue3 = false">确 定</el-button>
		  				</span>
		  </el-dialog>
	  </el-header>
	  <el-main class="main3">
			<el-table
		      :data="userdata"
		      border
		      style="width: 100%;"
		  	>
		  	<el-table-column
		  		type="index"
		  		label="#"
		  		width="25">
		  	</el-table-column>
		      <el-table-column
		        prop="username"
		        label="用户名"
		        width="100">
		    </el-table-column>
		    <el-table-column
		        prop="realname"
		        label="真实姓名"
		        width="100">
		      </el-table-column>
		      <el-table-column
		        prop="userid"
		        label="身份证号"
		  		width="200">
		      </el-table-column>
			  <el-table-column
		  		prop="phonenum"
		  		label="联系电话"
		  		width="200">
		  	</el-table-column>
		  	<el-table-column
		  		prop="address"
		  		label="居住地址"
		  		width="300">
		  	</el-table-column>
		  	<el-table-column
		  		prop="authorityname"
		  		label="权限"
		  		width="100">
		  	</el-table-column>
		  	<el-table-column
		  		label="操作"
		  		>
		  		<template slot-scope="scope">
		  			<el-button type="primary" @click="update(scope.$index, scope.row)">修改</el-button>
		  			
					<el-dialog
						title="修改"
						:visible.sync="istrue2"
						width="20%"
						:before-close="handleClose">
						<el-radio v-model="authority" label="1">管理员</el-radio>
						<el-radio v-model="authority" label="2">员工</el-radio>
						  <span slot="footer" class="dialog-footer">
						    <el-button @click="istrue2 = false">取 消</el-button>
						    <el-button type="primary" @click="update1">确 定</el-button>
						  </span>
						</el-dialog>
		  		</template>
		  			 					
		  	</el-table-column>
		    </el-table>
			<el-pagination
				background
				@size-change="size_change"
				@current-change="current_change"
				:current-page=pageNum 
				:page-size = 5
				layout="prev, pager, next"
				:total= "total">
			</el-pagination>
	  </el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'conservator',
		data() {
			return {
				userdata: [],
				searchdata: '',
				searchdata2: [],
				total: 0,
				pageNum: 1,
				pageSize:5,
				istrue3: false,
				istrue2: false,
				authority: '',
				username: '',
			}
		},
		methods: {
			display() {
				var url = "http://localhost:8848/superuser/display?pagenum="+this.pageNum;
				// console.log(url);
				this.$axios.get(url)
					.then( (resp) => {
						var u = resp.data;
						this.userdata = u.list;
						// console.log(this.userdata);
						this.pageNum = u.pageNum;
						this.total = u.total;
						// console.log(u.list);
						
						// console.log(this.inventorydate);
					})
					.catch( (err) => {
						console.log("error=", err);
					})
			},
			update(index, row) {
				this.istrue2 = true;
				this.authority = row.authorityid;
				this.username = row.username;
				console.log(this.authority);
			},
			update1() {
				var url = "http://localhost:8848/superuser/update?username="+this.username+"&authorityid="+this.authority;
				this.$axios.get(url) 
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("修改成功");
						this.display();
					}
					else {
						this.$message.error("修改失败")
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
				
				this.istrue2 = false;
				this.display()
			},
			searchuser() {
				this.istrue3 = true;
				
				var url = "http://localhost:8848/superuser/search?username="+this.searchdata;
				
				this.$axios.get(url)
				.then( (resp) => {
					var u = resp.data;
					
					this.searchdata2.splice(0,1,u);
				})
				.catch( (err) => {
					console.log("error", err);
				})
			},
			//监听 pagesize 改变的事件
			   size_change(newSize){
			       this.pageSize = newSize
				   // this.inventorydate.push(this.pagelist);
				   console.log(newSize);
			   },
			   //监听 页码值 改变的事件
			   current_change(newPage){
			       this.pageNum = newPage
			       //this.comeindata.push(this.pagelist);
			       console.log(newPage);
				   
				   this.display()
			   },
			   handleClose(done) {
			           this.$confirm('确认关闭？')
			             .then(_ => {
			               done();
			             })
			             .catch(_ => {});
			         },
			   
		},
		mounted() {
			
			this.display()
		}
	}
</script>

<style>
</style>
